<!DOCTYPE html>
<html>
<header>
    <meta charset="utf-8" />
    <meta name="viewport"
        content="width=device-width,initial-scale=1.0,user-scalable=no,maximum-scale=1.0,minimum-scale=1.0">
    <title>
        登录页
    </title>
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">

    </script>
    
    <!-- 引入 layui.css -->
    <link href="./css/layui.css" rel="stylesheet" />

    <!-- 引入 layui.js -->
    <script src="./js/layui.js"></script>
    <script src="./js/utils.js"></script>
    <script src="./js/constant.js" ></script>
    <script src="./js/data.js"></script>
    <script src="./js/userAuth.js"></script>
    <script src="./js/request.js"></script>
    <script type="text/javascript">

        var count = -1;
        var mobileWhenSendMsg = "";
        var hasSend = false;

        function loginClick(){
            const account = $("#account").val();
            const pwd     = $("#code").val();
            const check   = $(".check").is(":checked");

            if(mobileWhenSendMsg==""){
                layer.open({
                    title : "提示",
                    content : "请先获取验证码，若已发送过验证码则请刷新后重试"
                })
                return ;
            }

            const canUserMobile = mobileIsValid(account) && (account == mobileWhenSendMsg) ;

            if(!canUserMobile){
                layer.open({
                    title : "提示",
                    content : "请输入正确的手机号或者接收短信的手机号",
                })
                return ;
            }
            if(!pwd || pwd == ""){
                layer.open({
                    title : "提示",
                    content : "请输入手机收到的验证码",
                })
                return ;
            }
            if(!check){
                layer.open({
                    title : "提示",
                    content : "请仔细阅读并勾选协议",
                })
                return ;
            }
            var loadIndex = layer.load();
            const userInfo = getUserInfo();
            console.log(userInfo);
            
            $.ajax({
                url : REQUEST_URL,
                method:"post",
                type:"json",
                contentType:"application/json",
                headers:{
                    ...REQUEST_HEADERS(),
                    ValidCode:getCodeValidation()
                },
                data: JSON.stringify({
                    action : "BindeUser",
                    phoneNumber:account,
                    HeadImage:userInfo?userInfo.headimgurl : "",
                    ValidCode:pwd
                }),
                success:function(d,t,x){
                    layer.close(loadIndex);
                    const res = d;
                    console.log(d)
                    if(res.code == 200){
                        location.replace(LOGIN_RESULT_SUCCESS_PAGE);
                    }else{
                        layer.open({
                            title : "错误提示",
                            content : res.message
                        })
                    }
                },
                error:function(x,t,e){
                    layer.close(loadIndex);
                    layer.open({
                            title : "错误提示",
                            content : e
                        })
                }
            })

        }

        function countDown(){

            const account = $("#account").val();
            const isValidate = mobileIsValid(account);
            console.log(isValidate,account)
            if(!isValidate){
                $("#account-validate").removeClass("hide");
                $("#account-validate").addClass("show");
                return ;
            }

            if(count == -1){
                count = 60;
            }else{
                return ;
            }
            const timer = setInterval(() => {
                if((count = count-1) == -1){
                    $("#authCode").text("获取验证码")
                    $("#authCode").removeClass("code-disable")
                    $("#authCode").addClass("code-enable")
                    clearInterval(timer);
                }else{
                    $("#authCode").text(`${count}秒后重试`)
                    $("#authCode").removeClass("code-enable")
                    $("#authCode").addClass("code-disable")
                }
                
            }, 1000);
            mobileWhenSendMsg = account ;
            hasSend=true;
            $.ajax({
                url : REQUEST_SEND_CODE+"?PhoneNumber="+account,
                // data : JSON.stringify({PhoneNumber : account}),
                headers : REQUEST_HEADERS(),
                method:"get",
                success:function(res){
                    console.log(res);
                    if(res.code == 200){
                        layer.open({
                            title : "提示",
                            content : "短信已发送至手机，请注意查收",
                            time : 1500,
                            btn:[]
                        })
                        saveCodeValidation(res.validCode);
                    }else{
                        layer.open({
                            title : "错误",
                            content : res.message,
                        })
                    }
                },
                error:function(e,s,x){
                    layer.open({
                            title : "错误",
                            content : s,
                        })
                }
            })
        }

        function onChangeAccount(){
            $("#account-validate").removeClass("show");
            $("#account-validate").addClass("hide");
        }

        $(document).ready(() => {
            // init();
            // init(false,true);
            whiteListPage();
            $(".register-btn").click(function(e){
                location.href="register-1-upload-idcard.html"
            })
            $("#account").bind("input propertychange keyup",function(e){
                console.log("text change ",e)
                onChangeAccount()
            })
            $(".login-btn").click(function(e){
                loginClick()
            })
        })
    </script>
</header>
<style>
    body {
        background-image: url("./static/loginBg.png");
        background-size: cover;
        background-repeat: no-repeat;
        display: flex;
        flex-direction: column;

        align-items: center;
    }

    .logo {
        width: 70px;
        height: 70px;
        border-radius: 35px;
    }

    .logo-contain1 {
        width: 90px;
        height: 90px;
        border-radius: 45px;
        background-color: rgba(255, 255, 255, 0.6);
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .logo-contain2 {
        width: 110px;
        height: 110px;
        border-radius: 55px;
        background-color: rgba(255, 255, 255, 0.3);
        display: flex;
        align-items: center;
        justify-content: center;
        margin-top: 40px;

    }

    .welcome-title {
        font-size: 30px;
        font-weight: 700;
        color: #fff;
        padding: 20px;
    }

    .form {
        width: 80%;
        max-width: 800px;
        background-color: hsla(0, 0%, 100%, .9);
        border-radius: 10px;
        overflow: hidden;
        padding: 30px 20px 20px;
        box-shadow: 0 0 3px 3px #e6e6e6;
    }

    .form-item {
        display: flex;
        flex-direction: row;
        align-items: center;
        background-color: white;
        height: 44px;
        border-radius: 10px;
        margin-bottom: 20px;
    }

    .form-item img {
        width: 20px;
        height: 20px;
        padding: 0px 10px;

    }

    .form-item input {
        border: none;
    }
    .login-btn{
        background-color: rgb(231, 85, 72);
        color:white;
        text-align: center;
        height: 44px;
        line-height: 44px;
        margin-top: 20px;
        border-radius: 5px;
    }
    .register-btn{
        text-align: center;
        color: gray;
        margin-top: 80px;
    }
    .show {
        display:  "";
    }
    .hide {
        display:  none;
    }
    .code-enable {
        color:rgb(229,86,77);
    }
    .code-disable{
        color:gray;
    }
</style>

<body>

    <div class="logo-contain2">
        <div class="logo-contain1">
            <img src="./static/logo.png" class="logo" />
        </div>
    </div>


    <div class="welcome-title">
        欢迎登录
    </div>

    <div class="form">
        <div class="form-item">
            <img src="./static/account-fill.png" />
            <!-- <div class="layui-input-block"> -->
            <input  id="account" type="text" name="title" requirgb(229,86,77) lay-verify="requirgb(229,86,77)" placeholder="请输入您的手机号码" autocomplete="off"
                class="layui-input">
            <!-- </div> -->
        </div>
        <div id="account-validate" style="color:rgb(229,86,77);" class="hide">
            请输入正确手机号
        </div>

        <div class="form-item">
            <img src="./static/password-fill.png" />
            <!-- <div class="layui-input-block"> -->
            <input id="code" type="text" name="title" requirgb(229,86,77) lay-verify="requirgb(229,86,77)" placeholder="请输入验证码" autocomplete="off"
                class="layui-input">
            <!-- </div> -->
            <div style="width:130px"  onclick="countDown()">
                <a style="color: rgb(231, 85, 72);" id="authCode">获取验证码</a>
            </div>
        </div>

        <div >
            <input type="checkbox" name="like[write]" class="check"/>
            <span>
                阅读并同意
                <a style="    color: rgb(103, 167, 251);" href="privateLicense.html">
                    《用户协议及隐私条例》
                </a>
            </span>
        </div>


        <div class="login-btn">
            登录
        </div>

        <div class="register-btn" >
            注册用户
        </div>

    </div>




</body>

</html>